<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" style="width: 400px; margin: 0 auto" label-width="100px">
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="temp.storeName" />
      </el-form-item>
      <el-form-item label="店铺简介" prop="storeDesc">
        <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.storeDesc" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="店铺经纬度" prop="storeXY">
        <el-input v-model="temp.storeXY" />
          <label>查找地址(点击地址获取经纬度)：<el-input v-model="keyword" /></label>
          <baidu-map ref="map" class="bm-view" @click="getAddressIp">
              <bm-view class="map"></bm-view>
              <bm-local-search  :keyword="keyword" map-type="BMAP_NORMAL_MAP" :auto-viewport="true" ></bm-local-search>
              <!--<bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>-->
          </baidu-map>
          <!--<baidu-map ref="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" class="bm-view"  />-->
      </el-form-item>
      <el-form-item label="店铺地址" prop="storeAddress">
        <el-input v-model="temp.storeAddress" />
      </el-form-item>
      <el-form-item label="店铺负责人" prop="storeContacts">
        <el-input v-model="temp.storeContacts" />
      </el-form-item>
      <el-form-item label="负责人手机" prop="storeContactsPhone">
        <el-input v-model="temp.storeContactsPhone" />
      </el-form-item>
      <el-form-item label="所在地" prop="storeLocation">
        <el-input v-model="temp.storeLocation" />
      </el-form-item>
      <el-form-item label="店铺状态" prop="storeStatus">
        <el-select v-model="temp.storeStatus" style="width: 100%;" class="filter-item">
          <el-option v-for="item in statusOptions1" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
      </el-form-item>
        <el-form-item label="推荐二维码">
            <img :src="shopQr" style="width: 100px; height: 100px;">
            <a :href="shopQr" download="二维码">下载二维码</a>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button>清空</el-button>
      <el-button type="primary" @click="updateShopDetail">提交</el-button>
    </div>
  </div>
</template>
<style scoped="scoped">
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>
<script>
  import {
    fetchShopDetail,
    updateShopInfo,
    fetchQrCode
  } from "@/api/shop";

  export default {
    name: "ShopInfo",
    filters: {
    },
    data() {
      return {
          keyword: '南京',
        temp: {},
        shopQr: '',
        rules: {
          storeName: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeDesc: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeXY: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeAddress: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeContacts: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeContactsPhone: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeLocation: [{
            required: true,
            message: "必填",
            trigger: "change"
          }],
          storeStatus: [{
            required: true,
            message: "必填",
            trigger: "change"
          }]
        },
        center: { lng: 118.78, lat: 32.07 },
        zoom: 15,
        statusOptions1: [{
          key: 0,
          label: '未确认'
        }, {
          key: 1,
          label: '已确认'
        }],
      };
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        const req = {
          id: 0
        };
        const res = await fetchShopDetail(req);
        this.temp = res.data.data;
        console.log(this.temp);
        const qrInfo = await fetchQrCode(this.temp.id);
        this.shopQr = 'data:image/jpeg;base64,'+qrInfo.data.data
          console.log(this.shopQr);
      },

      async updateShopDetail() {
        const res = await updateShopInfo(this.temp);
        if (res.data.code === 0) {
          this.$notify({
            title: "成功",
            message: "更新成功",
            type: "success",
            duration: 1000
          });
        }
      },

      mapHandler({ BMap, map }) {
        const _this = this;
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
                _this.center = { lng: r.longitude, lat: r.latitude }; // 设置center属性值
                _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }; // 自定义覆盖物

                _this.initLocation = true;
              }, { enableHighAccuracy: true })
      },
      getAddressIp(e) {
        const pt = e.point;
        this.$set(this.temp, "storeXY", pt.lng + "," + pt.lat);
      }
    }
  };
</script>
<style scoped>
    .bm-view .map{
        height: 300px;
    }
    .bm-view>div:last-child{
        position: absolute;
        top: 72px;
        z-index: 1000;
        left: 305px;
        width: 300px;
    }
</style>
